import React, { useState } from 'react'
import { connect } from 'react-redux'
import { Text, View, StyleSheet, SafeAreaView, Dimensions, Image, TextInput, TouchableWithoutFeedback } from 'react-native'
import { pTx } from "../../utils/dimensions"
import IconFont from '@pingtou/rn-vant-icons'
import httpApi from "../../api"

const AddFriends = ({ navigation }) => {
    const [address, setAddress] = useState('')
    const [isSearchBy, setIsSearchBy] = useState(false)

    onChange = (value) => {
        setAddress(value)
    }

    clear = () => {
        setAddress("")
    }
    onSubmit = () => {
        if (!address) return
        httpApi.searchByAddress({
            address: address?.trim(),
        }).then(res => {
            if (res.code == 20) {
                if (res.data.User) navigation.navigate('applyForFriend', res.data.User)
                if (res.data.Group) navigation.navigate('sendGroupJoin', res.data.Group)
            } else {
                setIsSearchBy(true)
            }
        })
    }
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.searchSection}>
                <IconFont name="search" size={pTx(20)} />
                <TextInput
                    style={styles.input}
                    placeholder="搜索"
                    onChangeText={(searchString) => {
                        setAddress(searchString)
                        if (!address) setIsSearchBy(false)
                    }}
                />
            </View>
            {address &&
                <>
                    {isSearchBy ?
                        <View style={[styles.addressSearchBy, { justifyContent: "center" }]}>
                            <Text style={[styles.null]} >该用户不存在</Text>
                        </View>
                        :
                        <TouchableWithoutFeedback onPress={onSubmit} >
                            <View style={styles.addressSearchBy}>
                                <Image style={[styles.addressFootImage]} source={require('../../assets/image/icon11.png')}></Image>
                                <Text style={[styles.label]} >搜索：</Text>
                                <Text style={[styles.addressSearc]} ellipsizeMode={'tail'} numberOfLines={1} >{address}</Text>
                            </View>
                        </TouchableWithoutFeedback>}
                </>
            }
        </SafeAreaView>
    )
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(AddFriends)


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#EDEDED",

    },
    searchSection: {
        marginHorizontal: pTx(15),
        flexDirection: 'row',
        alignItems: "center",
        backgroundColor: '#fff',
        borderRadius: pTx(8),
        paddingLeft: pTx(10),
    },
    input: {
        flex: 1,
        height: pTx(45),
        color: '#424242',
    },
    addressSearchBy: {
        marginTop: pTx(10),
        paddingHorizontal: pTx(15),
        paddingVertical: pTx(10),
        flexDirection: 'row',
        alignItems: "center",
        backgroundColor: "#fff"
    },
    addressFootImage: {
        height: pTx(40),
        width: pTx(40),
    },
    label: {
        marginLeft: pTx(5),
        color: "#000"
    },
    addressSearc: {
        maxWidth: pTx(200),
    },
    null: {

    }
})